<template>
  <div class="legend3">
    <div class="marker" :style="{ backgroundColor: color }" />
    <div class="name">{{ name }}</div>
  </div>
</template>
<script>
export default {
  name: 'Legend3',
  props: {
    name: { type: String, required: true },
    color: { type: String, required: true }
  }
};
</script>
<style lang="scss" scoped>
.legend3 {
  display: flex;
  align-items: center;
  height: 0.875rem;
  line-height: 0.875rem;
  .marker {
    width: 1.25rem;
    height: 0.0625rem;
  }
  .name {
    font-size: 0.875rem;
    color: $light3Grey;
    margin-left: 0.625rem;
  }
}
</style>
